<template>
  <div class="vacation">
    <div class="vacation-title">周末去哪儿</div>
    <ul>
      <li class="vacation-item" v-for="item in vacationList" :key="item.id">
          <div class="vacation-img">
              <img :src="item.imgUrl">
          </div>
          <div class="vacation-msg">
              <p>{{item.title}}</p>
              <p>{{item.msg}}</p>
          </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "vacation",
  props:['vacationList'],
  data(){
      return{
      
      };
  }
};
</script>

<style scoped>
.vacation-title{
    font-size:.32rem;
    padding:.24rem;
}
.vacation-item{
    margin-bottom:.1rem;
    background: #fff;
    font-size:.28rem;
}
.vacation-img{
    width: 100%;
    height:0;
    padding-bottom:37.4375%; 
}
.vacation-img img{
    width: 100%;
}
.vacation-msg{
    padding:.2rem 0 .2rem .2rem;
  
}
.vacation-msg p{
    margin-top:.2rem;
}
.vacation-msg p+p{
    color:#616161;
    font-size:.24rem;
}
</style>